<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>登录/注册</title>

<link rel="stylesheet" href="css/indexStyle.css">

</head>
<body>

<div class="container right-panel-active">

	<!-- Sign Up -->
	<div class="container__form container--signup">
		<form action="#" class="form" id="form1">
			<h2 class="form__title">注册</h2>
			<input type="text" placeholder="用户名" class="input" name="username"/>
			<input type="email" placeholder="邮箱" class="input" name="email"/>
			<input type="password" placeholder="密码" class="input" name="password"/>
			<input type="text" placeholder="验证码" class="input" name="verificationCode"/>
			<button class="btn" id="registerBtn" onclick="register()">注册</button>
		</form>
	</div>

	<!-- Sign In -->
	<div class="container__form container--signin">
		<form action="#" class="form" id="form2">
			<h2 class="form__title">登录</h2>
			<input type="text" placeholder="用户名" class="input" name="username"/>
			<input type="password" placeholder="密码" class="input" name="password"/>
			<a href="#" class="link">忘记密码?</a>
			<button class="btn" id="loginBtn" onclick="login()">登录</button>
		</form>
	</div>

	<!-- Overlay -->
	<div class="container__overlay">
		<div class="overlay">
			<div class="overlay__panel overlay--left">
				<button class="btn" id="signIn">登录</button>
			</div>
			<div class="overlay__panel overlay--right">
				<button class="btn" id="signUp">注册</button>
			</div>
		</div>
	</div>
</div>
<script src="js/jquery.min.js"></script>
<script  src="js/indexScript.js"></script>
<script type="text/javascript">
	function register(){
		let data = $('#form1').serialize();
		$.ajax({
			type: 'post',
			url: '/userinfo/userinfoController/register',
			cache: false,
			data: data,
			dataType: 'json',
			success:function(resp){
				alert(resp.message);
			},
			error:function (resp){
				alert("注册失败");
			}
		})
	}
	function login(){
		let data = $('#form2').serialize();
		$.ajax({
			type: 'post',
			url: '/userinfo/userinfoController/login',
			cache: false,
			data: data,
			dataType: 'json',
			success:function(resp){
				if (resp.code === 200){
					localStorage.setItem('token', resp.body);
					location.href = 'home.html';
				} else {
					alert(resp.message)
				}
			},
			error:function (resp){
				alert("登录失败");
			}
		})
	}
</script>
</body>
</html>
